/*
 * @Description: 标签大全
 * @Author: YWJ 
 * @Date: 2022-04-21 15:35:02 
 * @Last Modified by: YWJ
 * @Last Modified time: 2022-05-02 11:58:17
 */

<template>
  <div class="demo1">
    <div
      class="demo2"
      v-for="item in tags"
      @click="view(item.id)"
      :key="item.id"
    >
      <el-image
        style="width: 100px; height: 100px"
        :src="item.avatar"
        fit="scale-down"
		:title="item.tagName"
		@click="view(item.id)"
      ></el-image>
      <span>{{ item.tagName }}</span>
    </div>
  </div>
</template>

<script>
// import {listTags} from "@/api/tag"
export default {
  name: "BlogAllCategoryTag",
  data() {
    return {
      tags: [],
      //defaultAvatar : defaultAvatar
    };
  },

  created() {
    this.listTags();
  },

  methods: {
    //获取全部的标签列表
    listTags() {
      this.tags.push(
        { id: "1", avatar: "img/TagIcon/food.png", tagName: "美食" },
        { id: "2", avatar: "img/TagIcon/movie.png", tagName: "影视" },
        { id: "3", avatar: "img/TagIcon/study.png", tagName: "学习" },
        { id: "4", avatar: "img/TagIcon/entertainment.png", tagName: "娱乐" },
        { id: "5", avatar: "img/TagIcon/music.png", tagName: "音乐" },
        { id: "6", avatar: "img/TagIcon/technology.png", tagName: "科技" },
        { id: "7", avatar: "img/TagIcon/sport.png", tagName: "运动" },
        { id: "8", avatar: "img/TagIcon/live.png", tagName: "生活" },
        { id: "9", avatar: "img/TagIcon/fashion.png", tagName: "时尚" },
        { id: "10", avatar: "img/TagIcon/animal.png", tagName: "动物" }
      );
    },
	view(id){
		this.$router.push({path:`/tag/${id}`});
	}
  },
};
</script>

<style>
.demo1 {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  width:100vw;
  height: 50vh;
  /* margin-top: 50px; */
      align-content: space-around;
}

.demo2 {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
}

</style>
